<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <title>单点登陆</title>
  <style>
    html, body, div, p, form, label, ul, li, dl, dt, dd, ol, img, button, b, em, strong, small, h1, h2, h3, h4, h5, h6 {
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
      font-style: normal;
    }

    html {
      height: 100%;
      background-image: radial-gradient(circle,#1280e1 0%,#002069 100%);
    }

    body {
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: transparent;
    }

    .login {
      text-align: center;
    }

    .welcome {
      font-size: 3em;
      color: #eee;
      margin-top: 13%;
      margin-bottom: 3%;
    }

    .login-inp {
      margin: 0 30px 15px 30px;
      border: 1px solid #fff;
      border-radius: 25px;
      display: inline-block;
      width: 230px;
    }

    .login-inp:hover {
      background-color: #eeeeee2b;
    }

    .login-inp label {
      text-align: center;
      display: inline-block;
      color: #fff;
    }

    .login-hover:hover {
      width: 250px !important;
    }

    .login-inp input {
      line-height: 40px;
      color: #fff;
      background-color: transparent;
      border: none;
      outline: none;
    }

    .login-inp a {
      display: block;
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 16px;
      letter-spacing: 5px;

    }

    a, a.link:hover {
      color: #666;
    }

    a, a.link {
      color: #666;
      text-decoration: none;
      font-weight: 500;
    }

    .login-txt a {
      color: #fff;
      padding: 0 5px;
    }

    .login-txt a:hover {
      color: #eeeeeeba;
    }

    .login-txt {
      text-align: center;
      color: #fff;
    }

    .error {
      margin-top: -35px;
      color: #ffffff69;
      font-size: 1.2em;
      margin-bottom: 8px;
    }

    .logout {
      margin-top: -35px;
      color: #ffffff69;
      font-size: 1.2em;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
<form name='f' action='/login' method='POST' id="myForm">
  <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
  <div class="login">
    <div class="welcome">welcome</div>
    <div th:if="${param.error}" class="error">
      用户名或密码错误
    </div>
    <div th:if="${param.logout}" class="logout">
      您已经成功注销！
    </div>
    <div class="login-form">
      <div>
        <div class="login-inp login-hover">
          <label>账号</label>
          <input type="text" placeholder="" name="username" autofocus onfocus="onInputFocus(this)"
                 onblur="onInputBlur(this)"/>
        </div>
      </div>
      <div>
        <div class="login-inp login-hover">
          <label>密码</label>
          <input type="password" placeholder="" name="password" onfocus="onInputFocus(this)"
                 onblur="onInputBlur(this)"/>
        </div>
      </div>
      <div>
        <div class="login-inp">
          <a href="#" onclick="clickSubmit()">立即登录</a>
        </div>
      </div>
      <div>
        <div class="login-txt">
          <a href="#">立即注册</a>|<a href="#">忘记密码？</a>
        </div>
      </div>
    </div>
  </div>
</form>
<script>
  window.onload = function () {
    document.onkeydown = function (event) {
      var e = event || window.event;
      if (e && e.keyCode === 13) {
        clickSubmit()
      }
    };
  };

  function onInputFocus(obj) {
    obj.parentElement.style.width = '250px'
  }

  function onInputBlur(obj) {
    obj.parentElement.style.width = '230px'
  }

  function clickSubmit() {
    document.getElementById("myForm").submit()
  }
</script>
</body>
</html>